$sizeArr: 6, 8,9, 10,11, 12,13, 14, 16, 18, 20, 22, 24, 26, 28,30, 32;
//边距 包括 padding 和 margin
$gap:1,2,3, 4,5,6, 8, 9,10, 12, 14, 15, 16,18, 20,21,22,23, 24,
25, 26,27,28,30, 32, 36, 38,40,42,44,46, 48,50, 54, 56,60, 64,
68,80,84,100,120,133,150,200,250,280,300;
@each $size in $sizeArr {
	$remSize: $size*2;
	.size_#{$size} {
		font-size: #{$remSize}rpx;
	}
}


@mixin setAttr($type,$att) {
	@each $animal in $gap {
		$animam:$animal*2;
		.icon_#{$animal} {
			width: #{$animam}rpx;
			height: #{$animam}rpx;
		}
		.t_#{$animal}{
			top: #{$animam}rpx;
		}
		.b_#{$animal}{
			bottom: #{$animam}rpx;
		}
		.l_#{$animal}{
			left: #{$animam}rpx;
		}
		.r_#{$animal}{
			right: #{$animam}rpx;
		}
		.h_#{$animal}{
			height: #{$animam}rpx;
		}
		.z_#{$animal}{
			z-index: #{$animal} !important;
		}

		.min_h_#{$animal}{
			min-height: #{$animam}rpx;
		}
		.min_w_#{$animal}{
			min-width: #{$animam}rpx;
		}
		.max_w_#{$animal}{
			max-width: #{$animam}rpx;
		}
		.w_#{$animal}{
			width: #{$animam}rpx;
		}
		.b_r_#{$animal}{
			border-radius: #{$animam}rpx;
		}
		/*#{$att}为#{$animal}rpx*/
		.#{$type}_#{$animal} {
			#{$att}: #{$animam}rpx;
		}

		.#{$type}_l_#{$animal} {
			#{$att}-left: #{$animam}rpx;
		}

		.#{$type}_t_#{$animal} {
			#{$att}-top: #{$animam}rpx;
		}

		.#{$type}_r_#{$animal} {
			#{$att}-right: #{$animam}rpx
		}

		.#{$type}_b_#{$animal} {
			#{$att}-bottom: #{$animam}rpx;
		}

		.#{$type}_lr_#{$animal} {
			#{$att}-left: #{$animam}rpx;
			#{$att}-right: #{$animam}rpx
		}

		.#{$type}_tb_#{$animal} {
			#{$att}-top: #{$animam}rpx;
			#{$att}-bottom: #{$animam}rpx;
		}
	}


}

@each $type in pd, mr {
	$att: margin;
	@if $type==pd {
		$att: padding
	}
	@include setAttr($type, $att)
}
.block{
	display: block;
}
.color_ff{
	color: #ffffff;
}
.color_16{
	color: #168DA3;
}
.color_88{
	color: #888888;
}
.color_99{
	color: #999999;
}
.color_ffd{
	color: #FFDD00;
}
.color_33{
	color: #333333;
}
.color_4e{
	color: #4E485E;
}
.color_8c{
	color: #8C8C8C;
}
.color_dels{
	color: #FF3B30;
}
.text_break{
	word-break: break-all;
}
.bg_tran{
	background-color: transparent;
}
.bg_c0{
	background-color: #C00000;
}
.bg_f5{
	background-color: #F5F5F5;
}
.bg_e8{
	background-color: #E8E8E8;
}
.bg_ee{
	background-color: #eeeeee;
}
.bg_f7{
	background-color: #f7f7f7;
}
.bg_ff{
	background-color: #ffffff;
}
.bg_4a{
	background-color: #4AB4C8;
}
.bg_00_3{
	background-color: rgba(0,0,0,.3);
}
.bg_00_5{
	background-color: rgba(0,0,0,.5);
}
.bg_16{
	background-color: #168DA3;
}
.bg_dd{
	background-color: #dddddd;
}
.border_t_ee{
	border-top: #eeeeee 2rpx solid;
}
.border_ee{
	border: #eeeeee 2rpx solid;
}
.border_b_ee{
	border-bottom: #eeeeee 2rpx solid;
}
.border_r_d8{
	border-right:#d8d8d8 2rpx solid;
}
.border_r_e5{
	border-right:#E5E5E5 2rpx solid;
}
.in_block{
	display: inline-block;
}
.in_flex{
	display: inline-flex;
}
.hidden{
	overflow: hidden;
}
button{
	outline: none;
	border: none;
}
button:after{
	border: none;
}
.text_un{
	text-decoration: underline;
}
.text_cen{
	text-align: center;
}

.ab{
	position: absolute;
}
.mr_auto{
	margin-left: auto;
	margin-right: auto;
}
.t_0{
	top: 0;
}
.b_0{
	bottom: 0;
}
.l_0{
	left: 0;
}
.h_100b{
	height: 100%;
}
.w_100b{
	width: 100%;
}
.box{
	box-sizing: border-box;
}
.gr{
	display: grid !important;
}

.fl {
	display: flex;
}
.fl_0{
	flex-shrink: 0;
}
.fl_1 {
	flex: 1;
}
.fl_tb_cen {
	align-items: center;
}
.fl_tb{
	flex-direction: column;
}
.fl_lr {
	justify-content: space-between;
}
.fl_lr_end{
	justify-content: flex-end;
}
.fl_lr_cen {
	justify-content: center;
}

.fl_cen {
	align-items: center;
	justify-content: center;
}

.fl_inline {
	display: inline-flex
}

.re {
	position: relative;
}

.ab {
	position: absolute;
}

.mr_no {
	margin: 0;
}
.border_no{
	border:none !important;
}
.bold{
	font-weight: bold;
}
.text_en{
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

